<template>
	<view class="content" style="padding-bottom: 100upx;padding-top:60upx;position: relative;">
		<view class="myHomepage" @click="navRoute('myHomepage',2,{user_id:''})">
			我的主页
		</view>
		<view class="comment">
			<view class="commentItem" v-for="(item ,index) in list" :key="index">
				<view class="" style="display: flex;" @click="navRoute('myHomepage',3,item)">
					<view class="img_head">
						<!-- <image :src="item.user.pic||'/static/head_img.jpeg'" mode=""></image> -->
						<image v-if="!item.baby[0].user" class="left" :src="item.user.pic||'/static/head_img.jpeg'"
							mode="">
						</image>
						<block v-else>
							<image :src="item.user.pic" alt="" class="left" />
							<image :src="item.baby[0].pic" alt="" class="right" />
						</block>
					</view>
					<view class="text" :style="{width:!item.baby[0].user?'calc(100% - 90rpx)':'77%'}">
						<view class="" style="display: flex;">
							<view class="name">
								<block v-if="!item.baby[0].user"> <span class="parent">{{item.user.user||'路人'}}</span>
								</block>
								<block v-else>
									<span class="parent">{{item.user.user}}</span>
									<span class="child">{{item.baby[0].user}}</span>
								</block>
							</view>
						</view>

						<view class="time">
							{{item.time}}
						</view>


					</view>

				</view>
				<view class="">
					<view style="margin:5upx 0 10upx 0;">
						<u-read-more show-height="200" :shadowStyle="shadowStyle" close-text="全文" text-indent="0">
							<text class="content_text">{{item.content}}</text>
							</u-read-more>
					</view>


					<view v-if="item.video_pic&&forums_status==1" class="video" @click="play(item.video)"
						style="position: relative;">
						<u-icon name="play-circle-fill" size="100" color="#f1f1f1" class="play"></u-icon>
						<image :src="item.video_pic" mode="aspectFill"></image>
					</view>
					<view class="img" style="margin-bottom: 20upx;">
						<view class="imgItem" v-for="(itemImg ,Xindex) in item.pic_set" :key="Xindex"
							@click="$util.enlargement(item.pic_set,Xindex)">
							<image :src="itemImg" mode="aspectFill"
								:style="{height:!item.baby[0].pic?'200rpx':'175rpx'}"></image>
						</view>
					</view>
				</view>
				<!-- 			<view class="esc" v-if="code==2" @click="esc(item)">
					<u-icon name="trash" size="850" color="rgb(221, 22, 25)"></u-icon>
				</view> -->
				<view class="" style="display: flex;flex-wrap: wrap;position: relative;height: 100upx;">
					<view class="like_item" v-for="like_item in item.like_list"
						@click="navRoute('myHomepage',3,{user_type:like_item.user_list.user_type,user_id:like_item.user_list.id})">
						<image :src="like_item.user_list.pic||'/static/head_img.jpeg'" mode=""></image>
						<view class="">
							{{like_item.user_list.user||'暂无'}}
						</view>
					</view>
					<u-icon name="more-dot-fill" style="padding-top: 50upx;margin-left: 10upx;"
						v-if="item.like_list.length==6" @click="navRoute('liveList',item.id)"></u-icon>
					<view style="color: #ccc;font-size: 28upx;line-height: 100upx;" v-if="!item.like_list.length">
						快去拉好友来点赞哦~
					</view>
					<view class="fabulous" @tap.stop="like(item,index)">

						<span
							:style="{color: item.like_zt?'rgb(255,97,94)':'rgb(109, 108, 108)'}">{{item.like_num}}</span>
						<u-icon name="thumb-up" :color="item.like_zt?'rgb(255,97,94)':'rgb(109, 108, 108)'" size="40">
						</u-icon>
						<view :animation="animationDataArr[index]" class="praise-me animation-opacity"> +1
						</view>
					</view>
				</view>
			</view>


		</view>
		<u-empty v-if="!list.length" margin-top="200" text="啥也没有!" mode="list"></u-empty>




		<u-toast ref="uToast" />
		<Loading />
		<dragButton :isDock="true" :existTabBar="true" :distanceTop="100" @btnClick="navRoute('addCommunity')" />

		<view v-if="videoplay">
			<video controls id="myvideo" :src="videoUrl" @fullscreenchange="screenChange"></video>
		</view>
	</view>
</template>

<script>
	import dragButton from "@/components/drag-button/drag-button.vue";
	export default {
		components: {
			dragButton
		},

		data() {
			return {
				forums_status: uni.getStorageSync('basic').forums_status,
				show: false,
				list: [],
				num: 5,
				page: 1,
				networkCode: true,
				imgIndex: -1,
				animationData: {},
				animationDataArr: [],
				shadowStyle: {
					backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
					paddingTop: "100rpx",
					marginTop: "-100rpx"
				},
				videoplay: false,
				videoUrl: "",
				likeCode: false, //防止点赞过快，后台出错
				myData: {}
			};
		},
		onLoad(e) {
			console.log(e)
			this.myData = uni.getStorageSync('myData');
			this.newData()
			// 1 在页面创建的时候，创建一个临时动画对象
			this.animation = uni.createAnimation();
			this.animationDataArr = Array(this.list.length).fill({});
		},
		onUnload() {
			// 5 页面卸载的时候，清除动画数据
			this.animationData = {};
			this.animationDataArr = Array(this.list.length).fill({});
		},
		onShow(e) {
			this.videoContext = uni.createVideoContext("myvideo", this);
			if (typeof this.$mp.page.getTabBar === 'function' &&
				this.$mp.page.getTabBar()) {
				this.$mp.page.getTabBar().setData({
					selected: 2, //这个数是，tabBar从左到右的下标，从0开始
					list: uni.getStorageSync('list')
				})
			}
		},
		methods: {
			play(e) {
				this.videoUrl = e;
				console.log(e)
				console.log(this.videoContext)
				this.videoContext.requestFullScreen({
					direction: 0
				}); //direction: 90  这个是控制全屏的时候视屏旋转多少度 
				this.videoContext.play();
				this.videoplay = true;
			},
			screenChange(e) {
				let fullScreen = e.detail.fullScreen; //值true为进入全屏，false为退出全屏
				console.log(e, "qweeee========================================");
				if (!fullScreen) {
					//退出全屏
					this.videoplay = false; // 隐藏播放盒子
				}
			},
			newData() {
				if (!this.networkCode) return uni.showToast({
					title: '已经到底了~',
					icon: 'none'
				});
				this.$myRuquest('home/Forums/forums_list', {
					page: this.page,
					num: 5,
					type: 1,
					add: wx.getStorageSync("city")
				}).then(res => {
					uni.stopPullDownRefresh()
					if (res.code == 400) {
						if (res.data.length != 5) this.networkCode = false
						this.page++
						res.data.forEach(item => {
							// item.time = this.getLocalTime(item.time)
							item.time = this.$u.timeFrom(item.time);
						})
						this.list.push(...res.data)
					}
				})
			},
			getLocalTime(nS) {
				return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' ');
			},

			navRoute(path, code, item) {
				uni.navigateTo({
					url: `./${path}/${path}?code=${code}&item=${JSON.stringify(item)}`
				});
			},

			like(item, index) {
				console.log(item)
				if (this.likeCode) return;
				this.likeCode = true
				this.$myRuquest('home/Forums/forums_like', {
					forums_id: item.id
				}, 'POST').then(res => {
					this.$refs.uToast.show({
						title: res.msg
					})
					if (res.code == 400) {
						let num = -1
						if (this.list[index].like_zt == 1) {
							this.list[index].like_num--
							item.like_list.forEach((items, indexs) => {
								if (items.user_list.id == this.myData.id && items.user_list.user_type ==
									'user') return num = indexs
							})
							if (num != -1) {
								this.list[index].like_list.splice(num, 1)
								if(this.list[index].popLike){
									this.list[index].like_list.push(this.list[index].popLike)
									this.list[index].popLike=""
								}
								this.$forceUpdate();
							}
						} else {
							this.list[index].like_num++
							let data = this.myData
							data.user_type = 'user'
							this.list[index].like_list.unshift({
								user_list: data
							})
							if(this.list[index].like_list.length==7){
								this.list[index].popLike=this.list[index].like_list.pop()
							} 
							this.$forceUpdate();

						}
						this.list[index].like_zt = !this.list[index].like_zt
						this.praiseMe(index, this.list[index].like_zt)
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success'
						})
					}
					this.likeCode = false
				})
			},
			praiseMe(index, status) {

				this.list[index].status = status
				if (this.list[index].status) {
					// 执行动画
					this.animation.translateY(-30).opacity(1).step({
						duration: 500
					});
					// 通过动画实例的export方法导出动画数据给animation属性
					this.animationData = this.animation;
					this.animationDataArr[index] = this.animationData.export();

					// 还原动画
					setTimeout(() => {
						this.animation.translateY(0).opacity(0).step({
							duration: 0
						});
						this.animationData = this.animation;
						this.animationDataArr[index] = this.animationData.export();
					}, 600)
				}
			},
			onReachBottom() {
				this.newData()
			},
			onPullDownRefresh() {
				this.list = []
				this.page = 1
				this.networkCode = true
				this.newData()
			}
		}
	};
</script>
<style lang="less" scoped>
	.myHomepage {
		text-align: center;
		color: #fff;
		background-color: rgb(255, 97, 94);
		width: 160upx;
		height: 60upx;
		line-height: 60upx;
		border-radius: 12upx;
		// float: right;
		position: absolute;
		right: 20upx;
		top: 20upx;
		// margin-right: 20upx;
	}

	.addCommunity {
		background-color: red;
		width: 80upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		color: #fff;
		border-radius: 50%;
		position: fixed;
		right: 20upx;
		bottom: 200upx;
	}

	.twoCode {
		width: 100vw;
		height: 100vh;
	}

	.content_text {
		font-size: 28upx;
		font-weight: 900;
		color: #333333;

	}

	.video {
		width: 100%;
		height: 360upx;
		margin-bottom: 20upx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 12upx;
		}

		.play {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			opacity: .7;
		}
	}

	.comment {
		background-color: #F4F5F7;

		.commentItem {
			// display: flex;
			margin: 40upx 0;
			padding: 20upx 40upx;
			padding-bottom: 20upx;
			margin: 20upx 0;
			// position: relative;
			background-color: #fff;
			border-bottom: 1upx solid rgb(247, 247, 247);

			.img_head {
				margin-right: 10upx;
				display: flex;

				image {
					width: 80upx;
					height: 80upx;
					border-radius: 50%;
					border: 4upx solid rgb(247, 247, 247);
					overflow: hidden;
				}

				.right {
					margin-left: -30upx;
				}
			}

			.text {


				.name {
					font-size: 24upx;
					font-weight: 900;
					flex: 1;

					.parent {
						color: rgb(50, 50, 50);
					}

					.child {
						color: #FA6400;
						margin-left: 20upx;
						padding-left: 15upx;
						border-left: 2upx solid #e7e7e7;
					}
				}

				.time {
					flex: 1;
					text-align: left;
					font-size: 22upx;
					color: #a7a7a7;
				}


				.u-content {
					line-height: 1.2 !important;
				}

				.content_text {

					font-size: 26upx;

				}


			}

			.img {
				display: flex;
				flex-wrap: wrap;
				width: 100%;

				.imgItem {
					flex: 0 0 32.5%;



					image {
						width: 100%;
						height: 200upx;
						border-radius: 12upx;
					}
				}

				.imgItem:nth-child(2) {
					margin: 0 1.25%;
				}

				.imgItem:nth-child(5) {
					margin: 0 1.25%;
				}

				.imgItem:nth-child(8) {
					margin: 0 1.25%;
				}

			}

			.like_item {
				width: 80upx;
				margin: 3upx 6upx;

				image {
					width: 60upx;
					height: 60upx;
					border-radius: 50%;
					margin: 0 auto;
					display: block;
				}

				view {
					font-size: 20upx;

					text-align: center;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
	}


	.fabulous {
		width: 86upx;
		padding-bottom: 10upx;
		font-size: 24upx;
		display: flex;
		align-items: flex-end;
		flex-direction: row-reverse;
		color: rgb(153, 153, 153);
		position: absolute;
		right: 0;
		top: 30upx;
	}

	.praise-me {
		font-size: 30rpx;
		font-weight: bold;
		color: rgb(255, 97, 94);
		z-index: 2;
	}

	.animation-opacity {
		position: absolute;
		left: 40rpx;
		bottom: 10rpx;
		font-weight: bold;
		opacity: 0;
	}
</style>
